<html>
    <head>
        <meta charset="utf-8">
        <title>使用</title>
    </head>
    <body>
        <script src="jquery-3.7.1.min.js"></script>

        <h1 id="testH1">你好</h1>
        <h1 id="testH2">你好</h1>

        <div id="contentDiv">
            <p>这是一个段落。</p>
        </div>

        <input type="text" id="exampleInput" value="初始值">
        <textarea id="exampleTextarea">这是初始文本区域内容。</textarea>
        <select id="exampleSelect">
            <option value="1">选项1</option>
            <option value="2" selected>选项2</option>
            <option value="3">选项3</option>
        </select>

    </body>

    <script>
        /*
        操作元素的内容
        html()  获取元素中的html代码 （非表单元素）         含html标签
        html("内容") 设置元素中的html代码 （非表单元素）         含html标签
        text()  获取元素中的文本内容 不含HTML标签
        text("内容") 设置元素中的文本内容  不含html标签
        val()  获取表单元素的值
        val("新值") 设置表单元素的值


        表单元素：
        input, textarea, select，checkbox, radio, hidden, password
        非表单元素：
            div, span, p, h1, h2, h3, h4, h5, h6, ul, ol, li, img, a, table, tr, td, th, button, form, script, style, meta, title, head, body, html
        */

        // 使用原生JavaScript获取元素
        var div = document.getElementById("testH1");
        console.log(div);

        // 使用jQuery选择器获取元素
        var $testH1 = $("#testH1");
        var $testH2 = $("#testH2");
        var $contentDiv = $("#contentDiv");

        // 操作非表单元素的内容

        // 1. html() 方法 - 获取和设置包含HTML标签的内容
        console.log($testH1.html()); // 获取#testH1元素的HTML内容
        $testH1.html("<strong>新的HTML内容</strong>"); // 设置#testH1元素的HTML内容

        // 2. text() 方法 - 获取和设置不包含HTML标签的纯文本内容
        console.log($testH2.text()); // 获取#testH2元素的文本内容
        $testH2.text("新的文本内容"); // 设置#testH2元素的文本内容

        // 操作表单元素的值

        // 3. val() 方法 - 获取和设置表单元素的值
        var $exampleInput = $("#exampleInput");
        var $exampleTextarea = $("#exampleTextarea");
        var $exampleSelect = $("#exampleSelect");

        console.log($exampleInput.val()); // 获取<input>元素的值
        $exampleInput.val("更新后的值"); // 设置<input>元素的值

        console.log($exampleTextarea.val()); // 获取<textarea>元素的值
        $exampleTextarea.val("更新后的文本区域内容"); // 设置<textarea>元素的值

        console.log($exampleSelect.val()); // 获取<select>元素的选中值
        $exampleSelect.val("3"); // 设置<select>元素的选中值为 "3"

        // 示例：显示和更新<div>中的内容
        console.log($contentDiv.html()); // 显示原始HTML内容
        $contentDiv.html("<p>更新后的段落内容。</p>"); // 更新HTML内容
        console.log($contentDiv.text()); // 显示更新后的纯文本内容
    </script>

</html>